<template>
	<view class="main">
		<u-toast ref="uToast"></u-toast>
		<process @openclickable="openclickable" :sid="id" :repairList="repairList" :traceInfoList="traceInfoList">
			<!-- <template #footer="{user}">
				<view class="collapse">
					<u-collapse :border="false" :value="clickable" accordion :isLink="false">
						<u-collapse-item name="1" disabled>
							<text slot="title" class="u-page__item__title__slot-title">寄修详情</text>
							<view class="">
								<view class="client_type">
									<view class="flex flex_align">
										<view class="header_star" style="margin-right: 60rpx;width: 140rpx;">客户类型<text
												class="five_star iconfont icon-shiwujiaoxing"></text></view>
										<view class="type" style="flex: 1">
											<u-subsection :list="list" :current="repairList.customer_type == 1 ? 1 : 0"
												mode="subsection" disabled>
											</u-subsection>
										</view>
									</view>
									<view class="city_selcet mar_top" v-show="repairList.customer_type === 2">
										<view class="flex flex_align flex_bet">
											<view class="city_input flex flex_align"><text class="mar_right">省</text>
												<view class="" style="width: 100%">
													<u-input disabled :value="repairList.user_province"
														suffixIcon="arrow-down" :fontSize="12"></u-input>
												</view>
											</view>
											<view class="city_input flex flex_align"><text class="mar_right">市</text>
												<view class="" style="width: 100%">
													<u-input disabled :value="repairList.user_city"
														suffixIcon="arrow-down" :fontSize="12"></u-input>
												</view>
											</view>
										</view>
										<view class="flex flex_align flex_bet mar_top">
											<view class="city_input flex flex_align"><text class="mar_right">县</text>
												<view class="" style="width: 100%">
													<u-input disabled :value="repairList.user_county"
														suffixIcon="arrow-down" :fontSize="12"></u-input>
												</view>
											</view>
											<view class="city_input flex flex_align"><text class="mar_right">区</text>
												<view class="" style="width: 100%">
													<u-input disabled :value="repairList.user_area"
														suffixIcon="arrow-down" :fontSize="12"></u-input>
												</view>
											</view>
										</view>
									</view>
								</view>

								<view class="info mar_top">
									<view class="header_star mar_right">寄件信息<text
											class="five_star iconfont icon-shiwujiaoxing"></text>
									</view>
									<view class="mali_title flex flex_bet flex_align box_redius">
										<view class="txt " :class="{ 'active': repairList.as_type == 1 }">上门取件
										</view>
										<view class="txt" :class="{ 'active': repairList.as_type == 2 }">自主快递
										</view>
									</view>
									<view class="address">
										<view class="address_header flex flex_align flex_bet">
											<view class="">寄出地址</view>
											<view class="">{{repairList.create_time |newDate}}</view>
										</view>
										<view class="flex flex_align flex_bet">
											<view class="details mar_top">
												<view class="font_w title">{{editAddress.person.name}}
													{{editAddress.person.addr}}
												</view>
												<view>{{editAddress.person.phone}}</view>
											</view>
											<view class="address_icon mar_top"
												@click="goToUrl('/pages/myAddress/index')" style="width: 120rpx;"><text
													class="iconfont icon-dizhibu icon"></text>
												<view class="text">地址簿</view>
											</view>
										</view>
									</view>
									<view class="address mar_top">
										<view class="address_header">寄回地址</view>
										<view class="flex flex_align flex_bet">
											<view class="details mar_top" style="width: 75%;">
												<view class="font_w title">{{editAddress.firm.name}}
													{{editAddress.firm.phone}}
												</view>
												<view>{{editAddress.firm.addr}}</view>
											</view>
											<view class="address_icon mar_top"
												@click="goToUrl('/pages/afterAddress/index')" style="width: 120rpx;">
												<text class="iconfont icon-dizhibu icon"></text>
												<view class="text">地址簿</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<datils :details="repairList" :checkboxList="checkboxList" :faultList="faultList"
								:fileList="fileList" ref="datils" @deletePic="deletePic" @replaceImg="replaceImg"
								:expressage="user.tracking_number ? user.tracking_number : ''">
							</datils>

							<view class="mar_top mar_bottom" style="margin-bottom: 40rpx;">
								<u-button text="提交" type="primary" @click="confirm" throttleTime="3000"></u-button>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</template> -->
		</process>
	</view>
</template>

<script>
	// import datils from './component/details.vue'
	import process from './component/process.vue'
	import {
		getDynamicTraceInfo,
		repairById,
		repairEdit
	} from '@/api/repair.js'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			// datils,
			process
		},
		computed: {
			...mapState([
				'afterSale',
				'editAddress'
			])
		},
		data() {
			return {
				repairList: {},
				fileList: [],
				id: 0,
				clickable: '',
				checkboxList: [],
				faultList: [],
				list: ['代理商', '个人'],
				traceInfoList: [],
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id
				this.getrepairById(option.id)
			}
		},
		onShow() {
			this.getrepairById(this.id)
		},
		methods: {
			goToUrl(url) {
				uni.navigateTo({
					url: url + '?selectAddress=confirm'
				});
			},
			//寄修编辑
			confirm() {
				let params = {
					id: this.id,
					express_number: this.$refs.datils.$props.details.express_number,
					express_number_img: this.$refs.datils.$props.details.express_number_img,
					//地址
					user_address_id: this.editAddress.person.id,
					address_id: this.editAddress.firm.id
				}
				console.log(params,'123');
				repairEdit(params).then(res => {
					this.$refs.uToast.show({
						message: res.msg,
						icon: false,
						type: 'success',
						complete: function() {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}).catch(err => {
					this.$refs.uToast.show({
						message: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			//寄修申请记录
			getrepairById(id) {
				repairById({
					id: id
				}).then(res => {
					this.checkboxList = res.data.product_name.split(',').map(item => ({
						'name': item
					}))
					this.faultList = res.data.fault_name.split(',').map(item => ({
						'name': item
					}))
					this.repairList = res.data
					//寄出和寄回地址回显
					this.$store.commit('editAddress', {
						name: res.data.user_man,
						addr: res.data.user_address,
						phone: res.data.user_phone
					})
					this.$store.commit('editFirmAddress', {
						name: res.data.return_man,
						addr: res.data.return_address,
						phone: res.data.return_phone
					})
					if (res.data.express_number_img) {
						this.fileList = [{
							url: res.data.express_number_img_url,
							status: 'success'
						}]
					}
					if (res.data.express_number != '') {
						this.getTraceInfo(res.data.express_number)
					}
				}).catch(err => {
					this.repairList = {}
				})
			},
			//删除图片
			deletePic(index) {
				this.fileList.splice(index, 1)
			},
			//替换图片
			replaceImg(fullurl) {
				this.fileList = [{
					url: fullurl,
					status: 'success'
				}]
			},
			getTraceInfo(express_num) {
				getDynamicTraceInfo({
					waybillCode: express_num
				}).then(res => {
					this.traceInfoList = res.data
				}).catch(err => {
					console.log("获取订单跟踪失败", err)
					this.traceInfoList = []
				})
			}
			// //展开控制面板
			// openclickable() {
			// 	this.clickable = this.clickable ? 0 : 1
			// }
		}
	}
</script>

<style scoped>
	.collapse /deep/ .u-collapse-item__content__text {
		background-color: #fff;
	}

	.collapse /deep/ .u-cell__right-icon-wrap {
		display: none;
	}
</style>
<style lang="scss" scoped>
	.main {
		.type {
			//background-color: #f1f2f3;
			padding: 10rpx 40rpx;
			border-radius: 12rpx;
		}

		.info {
			.address {
				margin: 20rpx;
				background-color: #f1f2f3;
				border-radius: 12rpx;
				padding: 20rpx;

				.address_header {
					border-bottom: 1rpx solid #C5C6C8;
					padding-bottom: 10rpx;
				}

				.details {
					line-height: 40rpx;
				}
			}
		}

		.collapse {
			border-radius: 12rpx;
			overflow: hidden;
			color: #666666;
			font-size: 24rpx;
			letter-spacing: 2rpx;
			top: -22px;
			position: relative;
		}
	}

	.client_type {
		overflow: visible;

		.type {
			width: 80%;
		}

		.city_input {
			width: 45%;
		}

		.address_icon {
			width: 25%;
			text-align: center;
			border-left: 1rpx solid #E6E6E6;
			margin-left: 30rpx;

			text {
				font-size: 100rpx;
			}
		}

	}

	.mali_title {
		height: 80rpx;
		overflow: visible;
		padding: 0 40rpx;

		.txt {
			position: relative;
			text-align: center;
		}
	}

	.active {
		color: #3c9cff;
	}

	.active:before {
		content: "";
		left: 50%;
		width: 60rpx;
		height: 100%;
		border-bottom: 2rpx solid #3c9cff;
		position: absolute;
		bottom: -10rpx;
		transform: translate(-50%, 0px);
	}
</style>
